<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>列表</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/render_somthing.js"></script>
    </head>
    <style>
        .bg-card::-webkit-scrollbar{
            display: none;
        }

        body{
            background-color: black;
        }
        .bg-card{
            min-height: 98px;
            width: calc(100% - 2px);
            background: #fff;
            border-radius: 4px;
            top: 48px;
            z-index: 10;
            margin-bottom: 8px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }
        .name{
            color: #6d757a;
            letter-spacing: 0;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: 12px;
            line-height: 16px;
            max-height: 2.666666666666667em;
            white-space:nowrap;
        }
    </style>
    <body>
        <div id="tools"></div>

        
        <script>
            var render_somthing_tools;
            render_somthing_tools = new render_somthing();
            render_somthing_tools.init({
            // div的id
            id: "#tools",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `<div class="bg-card" style="overflow-x: scroll;"></div>`
            },
            // 渲染内容的配置
            content: {
                default: `
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 10px;">
                    <img style="width: 45px;height: 45px;border-radius: 50%;margin-bottom: 5px;" src="#{img}" />
                    <span class="name">#{author}</span>
                </div>
`,
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
               # {title}     - 变量，表示数据数组中对象的key
            */
            condition: [

            ],
        })
        render_somthing_tools.render([{
                        img: "https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=cd86988c75d9f2d33f1122ef99ed8a53/3bf33a87e950352a702e82654443fbf2b2118b14.jpg",
                        author:"瀑布流",
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万"
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万"
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万"
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万"
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万"
            }, ]);
        </script>
    </body>
</html>